<template>
  <div class="start-box">
    <div class="my-train">
      <span style="train-left">我的训练</span>
      <span class="tip">
        <img src="@/assets/images/tip.png" alt= /> 统计说明
      </span>
    </div>
    <div class="box">
      <p class="title">
        {{info.fatherChapterName}}
      </p>
      <p class="desc">
        {{info.chapterName}}
      </p>
      <template v-if="info.testStatus === '0'">
        <span class="all">题量：{{info.subjectNum}}</span>
      </template>
      <template v-if="info.testStatus === '1'">
        <p class="all">时间：{{info.testTime}}</p>
        <p class="all">进度：0/{{info.subjectNum}}（{{info.testRate}}%）</p>
        <span class="all">耗时：{{info.testDuration}}s</span>
      </template>
      <div class="start">
        <el-button type="primary" @click="$emit('startTest')">{{info.testStatus === '0' ? '开始' : '继续'}}训练</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StartBox',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="scss" scoped>
.start-box {
  padding: 20px 15px 15px 15px;
  .my-train {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .train-left {
      font-size: 22px;
      font-weight: 400;
    }
    .tip {
      font-size: 14px;
      display: flex;
      align-items: center;
      font-weight: 400;
      img {
        width: 19px;
        padding-right: 8px;
      }
    }
  }
  .box {
    padding: 30px;
    width: 380px;
    border: 8px solid #d5e2f2;
    border-radius: 10px;
    margin: 50px auto 0;
    .title {
      font-size: 16px;
      font-weight: 900;
      color: #101d37;
    }
    .desc {
      font-size: 14px;
      color: #9fa2aa;
    }
    .all {
      font-weight: 400;
      font-size: 16px;
      color: #101d37;
    }
    p {
      margin-bottom: 15px;
    }
    .start {
      margin-top: 30px;
      text-align: center;
      .el-button--primary {
        width: 200px;
      }
    }
  }
}
</style>
